<!--
- Author:   .
- Date:    2017/7/5 0005.
- File:    热点消息滚动通知.
-->
<template>
  <div class="hot-news">
    <div class="hot-news-tit"><i class="iconfont icon-gonggao"></i></div>
    <div class="hot-news-con">
      <div class="hot-news-con-txt" :style="{top: showIndex * -1.75 + 'rem', transition: showIndex != 0 ?'all .5s': ''}">
        <span class="slh" v-for="item in list" @click="gotoDetail(item)">{{item.txt}}</span>
        <span class="slh" v-if="list.length > 0" @click="gotoDetail(list[0])">{{list.length > 0 ? list[0].txt : ''}}</span>
      </div>
    </div>
    <span style="position: absolute; right: 15px; font-size: 14px;" @click="gotoMoreNotice">更多</span>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        showIndex: 0,
        scrollInterval: null
      }
    },
    props: {
// 格式：[{notice_id: '', sort: '', txt:'', url: ''}]
      list: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    created() {
      this.init()
    },
    beforeDestroy() {
      clearInterval(this.scrollInterval)
    },
    methods: {
      gotoDetail(item) {
        if (item.url) {
          this.gotoUrl(item.url)
        } else {
          this.$router.push({name: 'notice-detail', params: {id: item.notice_id}})
        }
      },
      gotoMoreNotice() {
        this.$router.push({name: 'notice-list'})
      },
      gotoUrl(url) {
        if (url == '') {
          return
        }
        if (url.indexOf(this.$config.website) != -1) {
          window.location.href = url // eslint-disable-line
        } else {
          this.$router.push({name: 'iframe', query: {url: url}})
        }
      },
      init() {
        this.scrollInterval = setInterval(() => {
          if (this.showIndex === this.list.length) {
            this.showIndex = 0
          }
          setTimeout(() => {
            this.showIndex++
          }, 200)
        }, 3800)
      }
    }
  }
</script>

<style lang="less">
  /*头条*/
  .hot-news {
    height: 2rem;
    line-height: 2rem;
    margin-top: .5rem;
    background: #FFF;
    overflow: hidden;
    &-tit {
      float: left;
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      .icon-gonggao {
        height: 2rem;
        font-size: 1rem;
        color: #f83166;
        margin-left: .5rem;
      }
    }
    &-con {
      position: relative;
      float: left;
      width: 13rem;
      font-size: 16px;
      color: #000;
      span {
        display: block;
        width: 100%;
        height: 1.75rem;
        overflow: hidden;
      }
      &-txt {
        position: absolute;
        left: 0;
        top: 0;
        width: 11.5rem;
      }
    }
  }
</style>